import informationPick from "@/components/InformationPick/information-pick.vue";
import { createApp, h } from "vue";
function MeasurePick({ map, overlayLimit = 1 }) {
  const ins = MeasurePick.getIns();
  if (ins) {
    return ins
  }
  this.map = map;
  this.listener = null;
  this.overlayLimit = overlayLimit;
  this.overlaysArr = [];
  this.sourceVec = null;
  this.layerPoint = null;
  this.styleVec = null;
  this.init();
  MeasurePick.ins = this;
}
MeasurePick.getIns = function () {
  return MeasurePick.ins;
}
MeasurePick.create = function ({ map, overlayLimit }) {
  return new MeasurePick({ map, overlayLimit })
}
// 初始化
MeasurePick.prototype.init = function () {
  if (!ol) { return }
  if (!this.map) { return }
  // 矢量数据源
  this.sourceVec = new ol.source.Vector();
  this.layerPoint = new ol.layer.Vector({
    source: this.sourceVec
  });
  // 矢量样式
  this.styleVec = new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'rgba(255, 87, 34, 1)',
      width: 2
    }),
    fill: new ol.style.Fill({
      color: 'rgba(255, 87, 34, 0.5)'
    })
  });
  this.layerPoint.setZIndex(21);
  this.map.addLayer(this.layerPoint);

  // 初始化绑定事件
  this.bindEvt();
}
// 绑定事件
MeasurePick.prototype.bindEvt = function () {
  this.map.getViewport().style.cursor = 'pointer';
  this.listener = this.map.on('click', (e) => {
    this.putOverlay(e);
  })
}
// 添加overlay
MeasurePick.prototype.putOverlay = function (e) {
  if (this.overlaysArr.length >= this.overlayLimit) {
    const head = this.overlaysArr[0];
    this.clearSingleOverlay(head);
    this.overlaysArr.shift();
  }
  const coordinate = e.coordinate;
  if (!coordinate) { return }
  const [longitude, latitude] = coordinate;
  if (!longitude || !latitude) { return }
  const unid = new Date().getTime()
  const attrIns = this;
  const listData = new Array(10).fill({
    key: '测试 Key',
    key: '测试 value'
  })
  const app = createApp({
    render() {
      return h(informationPick, {
        mainTitle: '坐标·属性',
        listData: listData,
        unid,
        onClose: (e) => {
          const { unid } = e;
          for (let i = 0; i < attrIns.overlaysArr.length; i++) {
            const item = attrIns.overlaysArr[i];
            if (item.id === unid) {
              attrIns.clearSingleOverlay(item);
              attrIns.overlaysArr.splice(i, 1);
              break;
            }
          }
        }
      })
    }
  })
  // 暂时不用
  // app.onUnmount()
  const parent = document.createElement('div');
  const el = app.mount(parent).$el;
  // 创建Overlay
  const overlay = new ol.Overlay({
    id: unid,
    element: el,
    offset: [0, -15],
    positioning: 'bottom-center',
    insertFirst: false,
    stopEvent: true
  });

  const featureVector = new ol.Feature({
    geometry: new ol.geom.Circle(coordinate, 360 / 6371000)
  });
  featureVector.setStyle(this.styleVec);
  // this.sourceVec.addFeature(featureVector);
  this.map.addOverlay(overlay); // 将Overlay添加到地图
  overlay.setPosition(coordinate); // 设置Overlay的位置
  this.overlaysArr.push({
    id: unid,
    app,
    overlay,
    featureVector
  });
}
// 清除单个
MeasurePick.prototype.clearSingleOverlay = function (item) {
  item.app.unmount();
  this.map.removeOverlay(item.overlay);
  // this.sourceVec.removeFeature(item.featureVector);
}
// 清除所有
MeasurePick.prototype.clearAllOverlay = function () {
  const arr = this.overlaysArr;
  if (arr.length) {
    for (let i = 0; i < arr.length; i++) {
      const item = arr[i];
      this.clearSingleOverlay(item);
    }
    this.overlaysArr = [];
  }
}
// 销毁实例
MeasurePick.prototype.destroy = function () {
  ol.Observable.unByKey(this.listener);
  this.listener = null;
  this.clearAllOverlay();
  MeasurePick.ins = null;
  this.map.getViewport().style.cursor = 'inherit';
}
export default MeasurePick